<!-- <template>
    <div class="detailLeft">
        <div class="glassBox">
            <div class="small" v-on="{mouseenter: mouseEnter, mousemove: mouseMove, mouseleave: mouseLeave}">
                <div>
                    <img :src="currentImg" alt="">
                </div>
                <div class="glass" v-show="glassShow" :style="glassPositon"></div>
            </div>
            <div class="big" v-show="bigShow">
                <img :src="currentImg" alt="" :style="bigimg">
            </div>
        </div>
    轮播图 
        <div class="change">
            <div class="lunBo">
                  左箭头 
                <div class="deatil_left_btn" @click="preFn"><img src="../assets/pre.png" alt=""></div>
                <div class="deatil_content" style="width:400px">
                    <div class="item-box" style="width: 580px; "  :style="prePosition">
                    <div class="item" v-for="(imgarc,index) in imglist" :key="index" @mouseenter="getIndex(index)">
                            <img :src="imgarc" alt="">
                    </div>
                </div>
                   <el-carousel :interval="2000" type="card" height="64px" arrow="always" width="400px">
                @mouseenter="getIndex(index)"
                <el-carousel-item v-for="(item,index) in imglist" :key="index">
                    <h3 justify="center">
                        <div>
                            <img :src="item" alt="" style="height:100%">
                        </div>
                    </h3>

                    
                </el-carousel-item>
            </el-carousel> 
                </div>
               
                <div class="deatil_right_btn" @click="nextFn"><img src="../assets/next.png" alt=""></div>
            </div>
            <div class="deatil_buttom">
                <span style="float: left;">
                    当前第
                    <i>{{currentIndex+1}}</i>
                    共
                    <i>{{imglist.length}}</i>
                    张
                </span>
                <span style="float: right;">点击图片可查看大图</span>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
    data() {
        return {
            glassPositon: { transform: "" },
            bigimg: { transform: "" },
            glassShow: false,
            bigShow: false,
            // 存放图片的数组
            imglist: [
                'https://www.kfzimg.com/sw/kfz-cos/kfzimg/14050379/1/8e05e0805b274519de_crypt_s.jpg',
                'https://www.kfzimg.com/sw/kfz-cos/pmimg/1078750/81a6b2fb7f6c4ac3_s.jpg',
                'https://www.kfzimg.com/sw/kfz-cos/pmimg/1078750/cb0ee753b7d0b205_s.jpg',
                'https://www.kfzimg.com/sw/kfz-cos/pmimg/1078750/81a6b2fb7f6c4ac3_s.jpg',
                'https://img0.baidu.com/it/u=922902802,2128943538&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1664125200&t=4043343452e148641255d05f509607cc',
                'https://www.kfzimg.com/sw/kfz-cos/pmimg/1078750/81a6b2fb7f6c4ac3_s.jpg',
                'https://www.kfzimg.com/sw/kfz-cos/pmimg/1078750/cb0ee753b7d0b205_s.jpg',
                "https://www.kfzimg.com/sw/kfz-cos/pmimg/5014303/ccc736e9adc45aa1_s.jpg",
                "https://www.kfzimg.com/sw/kfz-cos/pmimg/5014303/cc84252cb1e53ba4_s.jpg"

            ],
            // 保存当前图片的下标
            currentIndex: 0,
            currentImg: "https://www.kfzimg.com/sw/kfz-cos/pmimg/5014303/cc84252cb1e53ba4_s.jpg",
            //点击触发pre函数，让盒子向左移动
            prePosition:{ transform: "" },
            nextPosition:{ transform: "" },
            position:0
        }
    },
    components: {
        //可以传参数
    },

    methods: {
        mouseEnter: function (e: object) {
            console.log(e)
            this.glassShow = true
            this.bigShow = true
        },
        mouseMove: function ($e: any) {
            // console.log('鼠标移动了', $e)
            //鼠标位置
            let x = $e.offsetX;
            let y = $e.offsetY;
            let topX = x - 100 < 0 ? 0 : x - 100;
            let topY = y - 100 < 0 ? 0 : y - 100;
            // 对层罩位置再一次限制，保证层罩只能在原图区域空间内
            if (topX > 200) {
                topX = 200;
            }
            if (topY > 200) {
                topY = 200;
            }
            // 通过 transform 进行移动控制，移动相应的距离
            this.glassPositon.transform = `translate(${topX}px,${topY}px)`;
            this.bigimg.transform = `translate(-${2 * topX}px,-${2 * topY}px)`;
        },
        // 阻止冒泡
        mouseLeave: function () {
            this.glassShow = false
            this.bigShow = false
        },

        //获取图片的下标
        getIndex(index: number) {
            // console.log(index)
            this.currentIndex = index
        },
        preFn(){
            this.prePosition.transform = `translateX(${this.position}px)`;
            this.position+=64;
            // this.prePosition.transform = `translateX(-65px)`;
            // // transform: translateX(-134px);
            console.log('上一张')
        },
        nextFn(){
            this.prePosition.transform = `translateX(${this.position}px)`;
            this.position-=64;
        },

        // clickImg(){
        //     this.currentImg=this.imglist[this.currentIndex]
        // }
    },

    watch: {
        //获取图片的下标
        currentIndex(index: number) {
            console.log(index)
            this.currentIndex = index

            this.currentImg=this.imglist[this.currentIndex]
        }
        // prePosition(){
        //     this.prePosition.transform = `translateX(${this.position}px)`;
        //     this.position+=64;
        // },
        // nextPosition(){
        //     this.prePosition.transform = `translateX(${this.position}px)`;
        //     this.position+=-64;
        // }
    }
})
</script>

<style lang="scss" scoped>
.detailLeft {
    position: relative;
    width: 400px;
    // height: 400px;
    border: 1px solid rgb(75, 72, 72);
    background: #f6f6f6;

    .small {
        height: 400px;
        line-height: 400px;
        text-align: center;

        img {
            width: 100%;
            height: 265px;
            vertical-align: middle
        }
    }

    .big {
        position: absolute;
        width: 600px;
        height: 600px;
        left: 402px;
        top: 0px;
        overflow: hidden;

        // img {
        //     // width: 600px;
        //     // height: 600px;
        // }
    }
}

.glass {
    width: 200px;
    height: 200px;
    background-color: rgba(217, 212, 51, 0.5);
    position: absolute;
    top: 0;
    left: 0;
}


// h3 {
//     margin: 0px auto;

//     img {
//         width: 62px;
//         border: 1px solid #9e100e;
//     }
// }

// .el-carousel__item--card {
//     width: 10%;
//     height: 64px;
// }

// h3 {
//     color: #475669;
//     opacity: 0.75;
//     height: 64px;
//     width: 64px;
//     line-height: 64px;
// }

// h3 img {
//     width: 64px;
//     height: auto;
// }

// 轮播效果
.change {
    width: 100%;
    height: 101px;
    // border: 1px solid yellow;

    .deatil_left_btn {
        float: left;
        width: 18px;
        height: 32px;
        margin-top: 28px;

        img {
            width: 18px;
        }
    }

    .deatil_content {
        width: 100%;
        height: 64px;
        border: 1px solid #888;
        margin-top: 12px;
        padding-left: 8px;
        overflow: hidden;
        box-sizing: border-box;
        background-color: #fff;

        .item {
            // float: left;
            display: inline-block;
            width: 62px;
            height: 62px;
            background: #fff;
            border: 1px solid #eaeaea;
            font-size: 0;
            text-align: center;
            line-height: 102px;
            margin-right: 8px;
            border: 1px solid #9e100e;
            box-sizing: border-box;
            cursor: pointer;

            img {
                width: 100%;
                height: 41px;
            }
        }

    }

    .deatil_right_btn {
        margin-top: 28px;
        float: right;
        width: 18px;
        height: 32px;

        img {
            width: 18px;
        }
    }

    .deatil_buttom {
        width: 354px;
        font-size: 12px;
        color: #888;
        margin: 7px auto 0;
    }
    .lunBo{
       display: flex;
    }

}

</style> -->


<!-- 放大镜 -->
<template>
    <div class="detailLeft">
      <div class="glassBox">
        <div class="left">
          <img class="leftImg" :src="currentImg" alt="">
          <!-- 鼠标层罩 -->
          <div v-show="topShow" class="top" :style="topStyle"></div>
          <!-- 最顶层覆盖了整个原图空间的透明层罩 -->
          <div class="maskTop" @mouseenter="enterHandler" @mousemove="moveHandler" @mouseout="outHandler"></div>
        </div>
        <div v-show="rShow" class="right">
          <img :style="r_img" class="rightImg" :src="currentImg" alt="">
        </div>
      </div>
      <div>
        <!--轮播图 -->
        <div class="change">
          <div class="lunBo">
            <!-- 左箭头 -->
            <div class="deatil_left_btn" @click="preFn"><img src="../assets/pre.png" alt=""></div>
            <div class="deatil_content" style="width:400px">
              <div class="item-box" style="width: 580px; " :style="prePosition">
                <div class="item" v-for="(imgarc,index) in imglist" :key="index" @mouseenter="getIndex(index)">
                  <img :src="imgarc" alt="">
                </div>
              </div>
            </div>
            <!-- 右箭头 -->
            <div class="deatil_right_btn" @click="nextFn"><img src="../assets/next.png" alt=""></div>
          </div>
          <div class="deatil_buttom">
            <span style="float: left;">
              当前第
              <i>{{currentIndex+1}}</i>
              共
              <i>{{imglist.length}}</i>
              张
            </span>
            <span style="float: right;">点击图片可查看大图</span>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent } from 'vue'
  
  export default defineComponent({
    data() {
      return {
        topStyle: { transform: '' },
        r_img: { transform: '' },
        topShow: false,
        rShow: false,
        // 存放图片的数组
        imglist: [
          'https://www.kfzimg.com/sw/kfz-cos/kfzimg/14050379/1/8e05e0805b274519de_crypt_s.jpg',
          'https://www.kfzimg.com/sw/kfz-cos/pmimg/1078750/81a6b2fb7f6c4ac3_s.jpg',
          'https://www.kfzimg.com/sw/kfz-cos/pmimg/1078750/cb0ee753b7d0b205_s.jpg',
          'https://www.kfzimg.com/sw/kfz-cos/pmimg/1078750/81a6b2fb7f6c4ac3_s.jpg',
          'https://www.kfzimg.com/sw/kfz-cos/pmimg/1078750/81a6b2fb7f6c4ac3_s.jpg',
          'https://www.kfzimg.com/sw/kfz-cos/pmimg/1078750/cb0ee753b7d0b205_s.jpg',
          "https://www.kfzimg.com/sw/kfz-cos/pmimg/5014303/ccc736e9adc45aa1_s.jpg",
          "https://www.kfzimg.com/sw/kfz-cos/pmimg/5014303/cc84252cb1e53ba4_s.jpg"
        ],
        // 保存当前图片的下标
        currentIndex: 0,
        currentImg: "https://www.kfzimg.com/sw/kfz-cos/pmimg/5014303/cc84252cb1e53ba4_s.jpg",
        //点击触发pre函数，让盒子向左移动
        prePosition: { transform: "" },
        nextPosition: { transform: "" },
        position: 0
      }
    },
    methods: {
      // 鼠标进入原图空间函数
      enterHandler() {
        // 层罩及放大空间的显示
        this.topShow = true
        this.rShow = true
      },
      // 鼠标移动函数
      moveHandler(event: any) {
        // 鼠标的坐标位置
        let x = event.offsetX
        let y = event.offsetY
        // 层罩的左上角坐标位置，并对其进行限制：无法超出原图区域左上角
        let topX = (x - 100) < 0 ? 0 : (x - 100)
        let topY = (y - 100) < 0 ? 0 : (y - 100)
        // 对层罩位置再一次限制，保证层罩只能在原图区域空间内
        if (topX > 200) {
          topX = 200
        }
        if (topY > 200) {
          topY = 200
        }
        // 通过 transform 进行移动控制
        this.topStyle.transform = `translate(${topX}px,${topY}px)`
        this.r_img.transform = `translate(-${2 * topX}px,-${2 * topY}px)`
      },
      // 鼠标移出函数
      outHandler() {
        // 控制层罩与放大空间的隐藏
        this.topShow = false
        this.rShow = false
      },
      //获取图片的下标
      getIndex(index: number) {
        // console.log(index)
        this.currentIndex = index
      },
      preFn() {
        this.prePosition.transform = `translateX(${this.position}px)`;
        this.position += 64;
        console.log('上一张')
      },
      nextFn() {
        this.prePosition.transform = `translateX(${this.position}px)`;
        this.position -= 64;
      },
    },
    watch: {
          //获取图片的下标
          currentIndex(index: number) {
              // console.log(index)
              this.currentIndex = index
              this.currentImg=this.imglist[this.currentIndex]
          }
      },

      mounted(){
        //  this.preFn()
         this.nextFn()
      }
  })
  
  </script>
  
  <style lang="scss" scoped>
  .detailLeft {
    position: relative;
    width: 400px;
    background: #f6f6f6;
  
  }
  
  /* 放大的图片，通过定位将左上角定位到(0,0) */
  .glassBox {
    display: flex;
  }
  
  .rightImg {
    // display: inline-block;
    width: 800px;
    height: 800px;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  /* 右边的区域图片放大空间 */
  .right {
    margin-left: 412px;
    width: 600px;
    height: 600px;
    // border: 1px solid red;
    position: absolute;
    overflow: hidden;
    z-index: 9999;
  }
  
  /* 一个最高层层罩 */
  .maskTop {
    width: 400px;
    height: 400px;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
  }
  
  /* 层罩，通过定位将左上角定位到(0,0) */
  .top {
    width: 200px;
    height: 200px;
    background-color: lightcoral;
    opacity: 0.4;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  /* 原图的显示 */
  .leftImg {
    width: 400px;
    height: 400px;
    // display: inline-block;
  }
  
  /* 原图的容器 */
  .left {
    width: 400px;
    height: 400px;
    border: 1px solid teal;
    float: left;
    position: relative;
  }
  
  
  .change {
    width: 100%;
    height: 101px;
    // border: 1px solid yellow;
  
    .deatil_left_btn {
      float: left;
      width: 18px;
      height: 32px;
      margin-top: 28px;
  
      img {
        width: 18px;
      }
    }
  
    .deatil_content {
      width: 100%;
      height: 64px;
      border: 1px solid #888;
      margin-top: 12px;
      padding-left: 8px;
      overflow: hidden;
      box-sizing: border-box;
      background-color: #fff;
  
      .item {
        // float: left;
        display: inline-block;
        width: 62px;
        height: 62px;
        background: #fff;
        border: 1px solid #eaeaea;
        font-size: 0;
        text-align: center;
        line-height: 102px;
        margin-right: 8px;
        border: 1px solid #9e100e;
        box-sizing: border-box;
        cursor: pointer;
  
        img {
          width: 100%;
          height: 41px;
        }
      }
  
    }
  
    .deatil_right_btn {
      margin-top: 28px;
      float: right;
      width: 18px;
      height: 32px;
  
      img {
        width: 18px;
      }
    }
  
    .deatil_buttom {
      width: 354px;
      font-size: 12px;
      color: #888;
      margin: 7px auto 0;
    }
  
    .lunBo {
      display: flex;
    }
  
  }
  </style>